<template>
  <!-- 未报价 再次报价详情页面 -->
  <div>
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">报价单详情</el-button>
      </div>
    </div>
    <div class="details">
      <div class="title_right">
        第一次未报价或未再次报价的面板展示。本提示不计算页面布局
      </div>
      <div class="title_da">采购单详情</div>

      <!-- 表格 -->
      <div class="h3">采购商品</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column
          prop="date"
          label="商品名称"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="商品分类"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="采购量"
          width="242"
          align="center"
        />
        <el-table-column prop="name" label="单位" width="242" align="center" />
        <el-table-column
          prop="name"
          label="目标单价"
          width="242"
          align="center"
        />
        <el-table-column prop="address" label="采购周期" align="center" />
      </el-table>

      <div class="h3">采购需求</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column
          prop="date"
          label="采购类型"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="是否需要发票"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="收货地址"
          width="242"
          align="center"
        />

        <el-table-column prop="address" label="备注" align="center" />
      </el-table>

      <div class="h3">采购联系人</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column prop="date" label="采购人姓名" align="center" />
        <el-table-column prop="date" label="采购人电话" align="center" />
      </el-table>

      <div class="xian"></div>

      <div class="h3">报价信息</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="df">
          <el-form-item label="报价有效期*" prop="name">
            <el-input style="width: 220px" v-model="ruleForm.name">
              <template #append>.com</template>
            </el-input>
          </el-form-item>

          <el-form-item label="交货期限*" prop="name">
            <el-input style="width: 129px" v-model="ruleForm.name">
              <template #append>天</template>
            </el-input>
          </el-form-item>

          <el-form-item label="报价含税" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="是" name="type" />
              <el-checkbox label="否" name="type" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="报价含运费" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="是" name="type" />
              <el-checkbox label="否" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item label="备注" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>

        <div class="h3" style="margin-left: 75px">报价联系人</div>

        <div class="df">
          <el-form-item label="姓名" prop="name">
            <el-input style="width: 220px" v-model="ruleForm.name"> </el-input>
          </el-form-item>

          <el-form-item prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="先生" name="type" />
              <el-checkbox label="女士" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item label="电话号码" prop="name">
          <el-input style="width: 220px" class="mr10" v-model="ruleForm.name">
          </el-input>
          <p style="color: #acacac">或</p>
          <el-input
            style="width: 120px"
            class="ml20"
            placeholder="区号"
            v-model="ruleForm.name"
          >
          </el-input>
          <el-input
            style="width: 150px"
            class="ml20"
            placeholder="座机号"
            v-model="ruleForm.name"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="发货地">
          <el-form-item label="" prop="region">
            <el-select v-model="ruleForm.region" placeholder="省份">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item prop="region" class="ml20">
            <el-select v-model="ruleForm.region" placeholder="城市">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form-item>

        <div class="footer">
          <el-button class="btn" style="background-color: #fff">取消</el-button>
          <el-button type="primary" class="btn"> 立即报价 </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import top from "../../../components/top/top.vue";
// css
import "../../../assets/css/size.css";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove",
  },
];

// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 验证
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});
</script>

<style>
.el-textarea__inner {
  width: 472px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  opacity: 1;
  border-radius: 4px;
}

/* 下拉框 */
.el-input__wrapper {
  width: 100px;
  height: 30px;
}
</style>
<style lang="scss" scoped>
.details {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin: 10px 0 0 10px;

  .title_right {
    width: 448px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
    float: right;
    margin: 20px 25px 0 0;
  }
  .title_da {
    width: 190px;
    height: 38px;
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    opacity: 1;
    margin: 0 auto;
    padding: 20px;
  }
  .tab {
    margin: 10px 60px 20px 80px;
  }
  .h3 {
    width: 80px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    border-left: 3px solid #acacac;
    margin: 0 0 20px 80px;
    padding-left: 5px;
  }
  .xian {
    // width: 1610px;
    height: 1px;
    background: #dcdfe5;
    opacity: 1;
    border-radius: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer {
    // width: 1610px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    opacity: 1;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
}
</style>
